<template>
  <view style="padding: 30rpx; margin: 0 auto; height: calc(100vh - 200rpx); overflow: auto">
    <view class="zl-flex contentBox">
      <view v-for="(item, index) in contentArray" :key="index" style="height: 50rpx; line-height: 50rpx" class="zl-flex">
        <text class="content" @click="changeCursor(index)">{{ item }}</text>
        <view class="tag" v-if="isPip(index)" @click="deletePip(index)">
          {{ pipItem(index) }}
          <image src="/static/new/icon_shuzhiren_error.png" style="width: 20rpx; height: 20rpx; position: absolute; top: -10rpx; right: -20rpx"></image>
        </view>

        <text class="cursor" v-if="index == cursor"></text>
      </view>
    </view>
    <view class="zl-flex zl-row-center footer">
      <view class="btn1" @click="changePip"> 插入画中画 </view>
      <view class="btn" @click="surePip"> 确 认 </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      content: '',
      cursor: 0,
      pipList: []
    }
  },
  onLoad(opt) {
    if (getApp().globalData.pipList.length > 0) {
      this.pipList = getApp().globalData.pipList
    }
    if (getApp().globalData.content) {
      this.content = getApp().globalData.content
    }
    uni.$on('choosePipId', (res) => {
      if (res) {
        this.cursor = res.cursor
        for (let i = 0; i < this.pipList.length; i++) {
          if (this.pipList[i].cursor == this.cursor) {
            Object.assign(this.pipList[i], {
              name: res.name,
              cursor: res.cursor,
              pipId: res.pipId,
              coverUrl: res.coverUrl
            })
            return
          }
        }
        this.pipList.push(res)
      }
    })
  },
  onUnload() {
    uni.$off('choosePipId')
  },
  computed: {
    // 将文本转为数组便于渲染
    contentArray() {
      return this.content.split('')
    }
  },
  methods: {
    isPip(index) {
      for (let i = 0; i < this.pipList.length; i++) {
        if (this.pipList[i].cursor == index) {
          return true
        }
      }
      return false
    },
    pipItem(index) {
      for (let i = 0; i < this.pipList.length; i++) {
        if (this.pipList[i].cursor == index) {
          return this.pipList[i].name
        }
      }
      return ''
    },
    deletePip(index) {
      for (let i = 0; i < this.pipList.length; i++) {
        if (this.pipList[i].cursor == index) {
          this.pipList.splice(i, 1)
          return
        }
      }
    },
    changeCursor(index) {
      this.cursor = index
    },
    changePip() {
      uni.navigateTo({
        url: '/pages/create/picList?cursor=' + this.cursor
      })
    },
    surePip() {
      if (this.pipList.length <= 0) {
        return this.$util.msg('请添加画中画！')
      }

      uni.$emit('choosePipList', this.pipList)
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
// // .footer {
// //   position: fixed;
// //   bottom: 0;
// //   left: 0;
// //   height: 180rpx;
// //   line-height: 180rpx;
// //   width: 100vw;
// //   background-color: #fff;
// //   border-top: 1rpx solid #eee;
// //   box-shadow: 0rpx 26rpx 30rpx 0rpx rgba(55, 58, 167, 0.24);
// // }
// // .cancelBtn1 {
// //   background: #eeeeee;
// //   border: 1rpx solid #eee;
// //   font-weight: 600;
// //   font-size: 28rpx;
// //   color: #000;
// // }
// // .sure-btn {
// //   background: #000;
// //   color: #fff;
// // }

// .btn99 {
//   width: 330rpx;
//   height: 88rpx;
//   margin: 0 auto;
//   border-radius: 44rpx;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

.content {
  font-size: 28rpx;
  color: #000;
  margin-left: 10rpx;
  line-height: 58rpx;
  text-align: center;
}
.contentBox {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  width: 690rpx;
  margin: 0 auto;
  padding: 30rpx;
  border-radius: 20rpx;
}
// 光标闪烁
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.cursor {
  display: inline-block;
  width: 10rpx;
  height: 40rpx;
  background: #ffc400;
  border-radius: 4rpx;
  margin: 0 10rpx;
  color: #ffc400;
  animation: blink 1s step-end infinite;
}
.tag {
  height: 40rpx;
  padding: 0 10rpx;
  line-height: 40rpx;
  background: #ffc400;
  border-radius: 6rpx;
  margin-left: 10rpx;
  position: relative;
  font-size: 26rpx;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 190rpx;
  background: #ffffff;
  gap: 30rpx;

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 330rpx;
    height: 110rpx;
    background: linear-gradient(90deg, #000 0%, #000 100%);
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(66, 106, 171, 0.29);
    border-radius: 20rpx;
    font-size: 36rpx;
    color: #f9f9f9;
  }
  .btn1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 330rpx;
    height: 110rpx;
    border-radius: 20rpx;
    font-size: 36rpx;
    border: 2rpx solid #000000;
    color: #000000;
  }
}
</style>
